<script setup lang="ts">
import ViewList from "@/components/common/ViewList.vue";
import ContentBox from "@/pages/index/components/ContentBox.vue";

import useList from "@/hooks/useList";
import useFetch from "@/hooks/useFetch";
import ApiMerchant from "@/api/merchant";

import { TMerchantStaff } from "@/global";

const { mid } = defineProps<{
  mid: number;
}>();

// 获取商户员工申请列表
const { loading, list, resetToFirst } = useList<TMerchantStaff>(
  ApiMerchant.getMerchantStaffApplyList,
  { search: { merchant_id: mid } }
);

const { run: runAudit } = useFetch<any>(ApiMerchant.auditMerchantStaff, {
  immediate: false,
  onSuccess: () => resetToFirst(),
});
</script>

<template>
  <ViewList :loading="loading" :is-empty="list.length == 0">
    <ContentBox v-for="item in list" :key="item.id" class="mt-4" hideBgImg>
      <view class="flex flex-column justify-between align-center p-4">
        <view>
          <view class="text-2xl">{{ item?.staff_name }}</view>
          <view class="mt-2 text-second">{{ item?.mobile }}</view>
        </view>
        <view>
          <view v-if="item?.status == 1" class="flex flex-column">
            <view
              class="bg-[#FF3B30] text-white rounded-full px-2 py-1 text-sm ml-3"
              @tap="runAudit({ id: item.id, status: 3 })"
              >拒绝</view
            >

            <view
              class="bg-[#007AFF] text-white rounded-full px-2 py-1 text-sm"
              @tap="runAudit({ id: item.id, status: 2 })"
              >同意</view
            >
          </view>
          <view v-else-if="item?.status == 2" class="text-[#888]">已审核</view>
        </view>
      </view>
    </ContentBox>
  </ViewList>
</template>
